/*
 * Created: 2022-08-27 10:07:13
 * Author : 涛涛涛
 */

import React, { FC, useContext } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { ProductExhibitionContext } from '@/pages/ProductExhibition/ProductExhibitionContext';
import { apiPostSetCollection } from '@/pages/_server/_api/ApiCollection/apiPostSetCollection';
export interface IProps extends ICompProps {}
Information.defaultProps = {} as Partial<IProps>;
function Information(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('Information', className);
    const {
        product: {
            id,
            artwork: { views: artworkViews, likes: artworkLikes },
            author: { name: authorName },
        },
        freshProduct,
    } = useContext(ProductExhibitionContext);
    const handleClickEnjoy = () => {
        apiPostSetCollection({
            goodsId: id,
            value: artworkLikes ? '0' : '1',
        }).then((res) => {
            freshProduct();
        });
    };
    return (
        <RootView className={localClassName} style={style}>
            <View className="Information-top">
                <View className="auther">
                    <Text>创作者</Text>
                    <Text className="colon">:</Text>
                    <Text>{authorName}</Text>
                </View>
                <View className="browse">
                    <Text className="iconfont">&#xe663;</Text>
                    <Text>{artworkViews}浏览</Text>
                </View>
            </View>
            <View className="Information-bottom">
                <View className="enjoy">
                    <View className="icon-wrap">
                        <Text className="iconfont" onClick={handleClickEnjoy}>
                            &#xe86f;
                        </Text>
                    </View>
                    <Text className="enjoy-num">{artworkLikes}</Text>
                </View>
            </View>
        </RootView>
    );
}
export default React.memo(Information as FC<IProps>);
const RootView = styled(View)`
    &.Information {
        margin: 40px 30px 0;
        line-height: 1;
        .Information-top {
            display: flex;
            .auther {
                font-size: 32px;
                font-weight: 600;
                color: #ff8828;
                .colon {
                    margin: 0 4px;
                }
            }
            .browse {
                margin-left: 40px;
                display: flex;
                align-items: center;
                font-size: 32px;
                color: #555;
                > .iconfont {
                    margin-right: 10px;
                    font-size: 38px;
                }
            }
        }
        .Information-bottom {
            margin-top: 20px;
            .enjoy {
                display: flex;
                align-items: center;
                font-size: 32px;
                color: #555;
                .icon-wrap {
                    margin: -20px;
                    .iconfont {
                        padding: 20px;
                        font-size: 40px;
                    }
                }
                .enjoy-num {
                    margin-left: 10px;
                }
            }
        }
    }
`;
